<template>
  <div id="app">
    <!-- 头部 -->
    <TodoHeader></TodoHeader>
    <!-- 输入框和添加按钮 -->
    <TodoInput @add-todo="handleAddTo"></TodoInput>
    <!-- 已完成 -->
    <div class="container mt-3 mb-3">
      <article class="panel is-success">
        <p class="panel-heading">
          已完成
          <span class="tag is-primary">{{ hasFinishLength }}</span>
        </p>
        <div class="panel-block">
          <div class="container">
            <div class="columns is-multiline">
              <TodoCard
                v-for="todo in hasFinishTodos"
                :key="`todo-${todo.id}`"
                :id="todo.id"
                :title="todo.title"
                :content="todo.content"
                :has-finish="todo.hasFinish"
                @toggle-status="handleToggleStatus"
                @delete-todo="handleDeleteTodo"
              ></TodoCard>
            </div>
          </div>
        </div>
      </article>
    </div>
    <!-- 未完成 -->
    <div class="container mt-3 mb-3">
      <article class="panel is-link">
        <p class="panel-heading">
          未完成
          <span class="tag is-info">{{ unFinishLength }}</span>
        </p>
        <div class="panel-block">
          <div class="container">
            <div class="columns is-multiline">
              <TodoCard
                v-for="todo in unFinishTodos"
                :key="`todo-${todo.id}`"
                :id="todo.id"
                :title="todo.title"
                :content="todo.content"
                :has-finish="todo.hasFinish"
                @toggle-status="handleToggleStatus"
                @delete-todo="handleDeleteTodo"
              ></TodoCard>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>
<script>
// 引入对应组件
import TodoHeader from "./components/TodoHeader"
import TodoInput from "./components/TodoInput"
import TodoCard from "./components/TodoCard"

export default {
  data() {
    return {
      todos: [
        { id: 1, title: "吃饭", content: "莫文蔚的阴天", hasFinish: true },
        { id: 2, title: "睡觉", content: "孙燕姿的雨天", hasFinish: false },
        { id: 3, title: "搬砖", content: "周杰伦的晴天", hasFinish: true }
      ]
    }
  },
  components: {
    TodoHeader,
    TodoInput,
    TodoCard
  },
  computed: {
    hasFinishTodos() {
      return this.todos.filter((todo) => todo.hasFinish);
    },
    unFinishTodos() {
      return this.todos.filter((todo) => !todo.hasFinish);
    },
    hasFinishLength() {
      return this.hasFinishTodos.length;
    },
    unFinishLength() {
      return this.unFinishTodos.length;
    },
  },
  methods: {
    handleToggleStatus({ id }) {
      this.todos =this.todos.map(todo =>{
        if(todo.id === id) todo.hasFinish = !todo.hasFinish
        return todo
      })
    },
    handleDeleteTodo({ id }) {
      this.todos = this.todos.filter(todo => todo.id != id)
    },
    handleAddTo({ title,content }) {
      if(title && content) {
          this.todos.push({
          id:Date.now(),
          title,
          content,
          hasFinish:false
        })
      }
    }
  }
}
</script>

<style>
</style>